/**
 * Created with JetBrains WebStorm.
 * User: gcw
 * Date: 14-6-19
 * Time: 下午2:03
 * To change this template use File | Settings | File Templates.
 */

var user = {
    info: {
        name: "",
        ip: ""
    },
    sok: {
        socket:  io.connect('http://localhost'),
        on: function(url, fun){                                        //监听发送过来的聊天信息
            this.socket.on(url, fun);
        },
        emit: function(url, data){                                     //发送消息
            this.socket.emit(url, data);
        }
    },
    add: function(){                                                     //进入页面
        var that = this;
        var $room_info = $("#room-info"),
            $room_new =  $room_info.find(".room-news"),
            $room_news = $room_info.find(".room-news ul"),
            $room_num = $room_info.find(".people-num");
        that.sok.on("join-us", function(data){
            $room_news.append('<li><p><em>'+ data.time +'</em>　<strong>'+ data.name +'</strong><span>【' + data.ip + '】</span> 加入</p></li>');
            $room_num.text(data.num);
            var temp_height = $room_news.height() - $room_new.height();
            $room_new.scrollTop(temp_height <= 0 ? 0 : temp_height);
        });
        that.sok.on("exit-us", function(data){
            $room_news.append('<li><p><em>'+ data.time +'</em>　<strong>'+ data.name +'</strong><span>【' + data.ip + '】</span> 退出</p></li>');
            $room_num.text(data.num);
        });
        that.sok.on("add", function(data){
            $room_num.text(data.num);
        });
        that.sok.emit("add", {});
        var $msg_ul = $("#msg .talk-contain ul");
        var $talk_contain = $("#msg .talk-contain");
        var talk_contain_height = $talk_contain.height();
        that.sok.on("msg", function(data){
            if(that.info.name == data.name){
                var html = '<li><h4 class="myself">' + data.name + ' <span>【' + data.ip + '】</span> <small>' + data.time + '</small></h4>'
                    + '<p>' + data.content + '</p></li>';
            }else{
                var html = '<li><h4>' + data.name + ' <span>【' + data.ip + '】</span> <small>' + data.time + '</small></h4>'
                    + '<p>' + data.content + '</p></li>';
            }
            $msg_ul.append(html);
            var temp_height = $msg_ul.height() - talk_contain_height + 10;
            $talk_contain.scrollTop(temp_height <= 0 ? 0 : temp_height);
        });
    },
    join: function(){                                                     //加入聊天
        var that = this;
        var $my_info = $("#my-info"),
            $warning = $my_info.find(".nick-warning"),
            $name = $my_info.find(".nick-name"),
            $btn = $my_info.find(".start-btn");
        $btn.on("click", function(){
            var name_val = $name.val();
            if(name_val == ""){
                $warning.html(' <span class="glyphicon glyphicon-warning-sign"></span> 昵称不能为空！').css("visibility", "visible");
            }else{
                that.sok.on("join",function(data){
                    if(!data.status){
                        $warning.html(' <span class="glyphicon glyphicon-warning-sign"></span> 昵称已被占用，换一个吧！').css("visibility", "visible");
                    }else{
                        $my_info.find(".my-nick").text(name_val);
                        $my_info.find(".my-ip").text(data.ip);
                        $warning.css("visibility", "hidden");
                        $my_info.find(".join-before").hide();
                        $my_info.find(".join-after").removeClass("hidden");
                        $("#msg .send-msg").removeClass("hidden");
                        that.info.name = name_val;
                    }
                });
                that.sok.emit("join", {name: name_val});
            }
        });
        var $msg_textarea = $("#msg .send-msg textarea");
        $("#msg .send-msg button").on("click", function(){
            var msg_content = $msg_textarea.val();
            if(msg_content != ""){
                that.sok.emit("msg", {content: msg_content});
                $msg_textarea.val("");
            }
        });

    },
    exit: function(){
        var that = this;
        $(window).on("beforeunload", function(){
            alert("dfdfdf");
            that.sok.emit("exit", {});
            that.sok.close();
            return false;
        });
    }
};

$(function(){
    // 进入页面创建双向通信连接
    user.add();

    // 发送个人昵称加入聊天
    user.join();

    // 退出聊天
    user.exit();
});

